
@import 'src/themes/mixins/mixins.scss';

@include b(sideNav) {
	width: 15vw;
	height: 100%;
	box-sizing: border-box;
	@include when(mobi) {
		width: 30vw;
	}
	@include e(nav-warp) {
		overflow-y: auto;
	}
	@include e(nav-group) {
		&:nth-child(1) {
			padding-top: 0.2rem;
		}
    &:nth-child(2) {
			padding-top: 0.4rem;
		}
	}
	@include e(nav-group-title) {
		font-size: 0.2rem;
		font-weight: 600;
	}
	@include e(nav-group-container) {
		font-size: 0.16rem;
	}
	@include e(sub-nav) {
		@include when(active) {
			@include themify($themes) {
				color: themed('font-color') !important;
			}
		}
	}
}

@include b(sideNav-mobi) {
	position: absolute;
	left: 5vw;
	top: 0.5rem;
	z-index: 9999;
	@include e(icon) {
		height: 48px;
		width: 48px;
		background: #fff;
		box-shadow: $--box-shadow-default;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		.iconfont {
			@include themify($themes) {
				color: themed('font-color') !important;
			}
		}
	}
	@include e(content) {
		@include when(hide) {
			position: absolute;
			left: -50vw;
		}
		@include when(active) {
			position: absolute;
			left: -5vw;
			width: 2rem;
			background: #fff;
			box-shadow: $--box-shadow-default;
			padding: 0 0 20px 20px;
		}
	}
}